import React, { Component } from "react";
import ReactDOM from "react-dom";
import { PullToRefresh, Toast } from "antd-mobile";

import MainLayout from "../../../../component/mainLayout/mainLayout";
import yhTools from "../../../../tools/yh";
import { InterfaceG } from "../../../../config/Config";

import "./transactionRecord.scss";

const pageSize = 20;

class TransactionRecord extends Component {
	constructor(props) {
		super(props);
		this.state = {
			recordList: [],
			refreshing: false,
			height: document.documentElement.clientHeight,
			overflow: "auto",
			loadStatus: "1"
		};
		this.channelCode = ""; // 渠道ID
		this.pageIndex = 1; // 页码
		this.totalCount = 0; // 数据总条数
	}

	componentDidMount() {
		this.channelCode = this.props.match.params.channelCode; // 渠道ID
		this.loadPageData(1);
		let _that = this;
		setTimeout(() => {
			const hei =
				_that.state.height -
				ReactDOM.findDOMNode(_that.refs.pullRefresh).offsetTop;
			_that.setState({
				height: hei
			});
		}, 100);
	}

	/**
	 * 加载页面数据
	 */
	loadPageData(pageIndex) {
		let _that = this;
		let objs = {
			url: InterfaceG.tradeDetail,
			params: {
				channelCode: this.channelCode,
				pageIndex: pageIndex,
				pageSize: pageSize
			}
		};
		yhTools.request(objs).then(res => {
			if (res.code === "0") {
				let loadData = [];
				let _loadStatus = "1";
				if (pageIndex === 1) {
					loadData = res.data;
					if (res.data.length === 0) {
						_loadStatus = "2";
					}
				} else {
					loadData = [..._that.state.recordList, ...res.data];
				}
				_that.pageIndex = pageIndex; // 当前第几页
				_that.totalCount = res.totalCount; // 总条数
				_that.setState({
					recordList: loadData,
					loadStatus: _loadStatus
				});
			} else {
				Toast.info(res.message, 2); // 加载失败
			}
			_that.setState({
				refreshing: false
			});
		});
	}

	/**
	 * 刷新数据
	 */
	refreshData() {
		// 计算是否有下一页
		if (Math.ceil(this.totalCount / pageSize) > this.pageIndex) {
			// 有下一页
			this.setState({ refreshing: true });
			this.loadPageData(this.pageIndex + 1);
		}
	}

	/**
	 * 列表点击事件,进入详情页
	 * @param {记录数据} cellData
	 */
	cellClickAction(cellData) {
		this.props.history.push({
			pathname: `/transactionDetail`,
			state: cellData
		});
	}

	render() {
		const _pageParams = {
			header: {
				title: "交易记录"
			},
			history: this.props.history,
			loadStatus: this.state.loadStatus, // （ '0'：数据加载中，'1'：加载完成，'2'：加载失败）
			cacheLifecycles: this.props.cacheLifecycles
		};

		const hasData = Math.ceil(this.totalCount / pageSize) > this.pageIndex;
		const data_normal = {
			activate: <div className="space">松开刷新</div>,
			deactivate: <div className="space">上拉加载</div>,
			release: <div className="space">加载中...</div>,
			finish: <div className="space">加载完毕</div>
		};
		const data_finish = {
			activate: <div></div>,
			deactivate: <div></div>,
			release: <div></div>,
			finish: <div></div>
		};

		const orderStatus = status => {
			let _orderStatus = "";
			switch (status) {
				case "000000":
					_orderStatus = "交易成功";
					break;
				case "999999":
					_orderStatus = "交易失败";
					break;
				case "000001 ":
					_orderStatus = "处理中";
					break;
				default:
					_orderStatus = "--";
					break;
			}
			return _orderStatus;
		};

		return (
			<MainLayout pageParams={_pageParams}>
				<PullToRefresh
					ref="pullRefresh"
					style={{ height: this.state.height, overflow: this.state.overflow }}
					indicator={hasData ? data_normal : data_finish}
					distanceToRefresh="50"
					direction={"up"}
					refreshing={this.state.refreshing}
					onRefresh={() => this.refreshData()}
				>
					<div
						className="TransactionRecord"
						id="KEY_TransactionRecord"
						style={{ minHeight: this.state.height }}
					>
						{this.state.recordList.map((value, index) => (
							<div key={index}>
								<div
									className="t_cell flexBetween pagePading"
									onClick={() => this.cellClickAction(value)}
								>
									<div className="flexLeft">
										<div className={"logo logo_" + value.tradeType}></div>
										<div>
											<div className="colorBlack font28 weight margin5">
												{value.productName}
											</div>
											<div className="colorLight font24 margin5">
												{value.tradeTime}
											</div>
										</div>
									</div>
									<div className="t_right">
										<div className="colorBlack font32 weight margin5">
											{value.tradeAmt}
										</div>
										<div className="colorLight font24 margin5">
											{orderStatus(value.tradeStatus)}
										</div>
									</div>
								</div>
								<div className="pagePading">
									<div className="line"></div>
								</div>
							</div>
						))}
						{this.totalCount > 0 &&
							Math.ceil(this.totalCount / pageSize) <= this.pageIndex && (
								<div className="space">没有更多了</div>
							)}
					</div>
				</PullToRefresh>
			</MainLayout>
		);
	}
}

export default TransactionRecord;
